import React, { useEffect, useState } from 'react'
import * as api from '../../api/index'
import { useDispatch, useSelector } from 'react-redux'
import { CartO } from '@react-vant/icons'
import { Sidebar, Toast, DropdownMenu,Search  } from 'react-vant';
import {useNavigate} from 'react-router-dom'
import { stopPropagation } from 'react-vant/es/utils';
const option1 = [
  { text: '类型筛选', value: 0 },
  { text: '食品', value: 1 },
  { text: '工具', value: 2 },
  { text: '花草', value: 3 },
  { text: '衣服', value: 4 },
];
const option2 = [
  { text: '价格从高到底', value: 'b' },
  { text: '价格从低到高', value: 'c' },
];

function Classify() {
  const dispatch = useDispatch()
  const navigate=useNavigate()
  const [searvalue, setSeaval] =useState('')
  const [active, setActive] = useState(0);
  useEffect(() => {
    dispatch(api.getList())
  }, [dispatch])

  const listd = useSelector(state => {
    return state.reducer.list
  })
  console.log(listd)
  const childrenList = useSelector(state => {
    return state.reducer.sonList
  })
  console.log(childrenList)

  const [value, setValue] = useState({});
  //排序
  const ChanegPai=(v)=>{
      console.log(v)
      dispatch(api.Shai(v.value2))
  }

  //跳转详情
  const goDetail=(item)=>{
    navigate('/detail/'+item.id,{state:item,replace:true})
  }

  //添加购物车
  const addShop=(e,ids)=>{
    e.stopPropagation();
    
    dispatch(api.addShop(ids))
  }

  return (
    <div className='Classify'>
      {/* 搜索 */}
      <Search value={searvalue} onChange={setSeaval} placeholder="请输入搜索关键词" />
      {/* 排序板块 */}
      <DropdownMenu value={value} onChange={(v) => { 
        setValue(v)
        ChanegPai(v)
      }}>
        <DropdownMenu.Item placeholder='排序' name="value2" options={option2} />
      </DropdownMenu>
      {/* 底部数据 */}
      <div className='ClassifySon'>
        <Sidebar
          value={active}
          onChange={(v) => {
            setActive(v);
            // Toast.info(`标签名 ${v + 1}`);
            dispatch(api.ChangeIndex(v))
          }}
        >
          {
            listd && listd.map((item, index) => {
              return <Sidebar.Item key={index} title={item.title} />
            })
          }
          {/* <Sidebar.Item title="标签名1" />
          <Sidebar.Item title="标签名2" />
          <Sidebar.Item title="标签名3" /> */}
        </Sidebar>
        <div className='cents'>
          {
            childrenList.length ? childrenList.map((item, index) => {
              return <div className='divs' key={index} onClick={()=>{
                goDetail(item)
              }}>
                <img src={item.img} alt="" />
                <div className='rigs'>
                  <p>{item.title}</p>
                  <p>类型：{item.type}</p>
                  <div className='bot'>
                    <p>${item.price}</p>
                    <CartO onClick={(e)=> {
                      addShop(e,item.id)
                    }} />
                  </div>
                </div>
              </div>
            }) : '暂无数据'
          }
        </div>
      </div>
    </div>
  )
}

export default Classify